<template>
  <div class="wrap">
    <div class="c-input fx-h-c">
      <img class="cs img br-5" :src="user.avatar" alt="" />
      <div
        class="box bg-w"
        :style="{ borderColor: active ? '#007fff' : '#eaeaea' }"
      >
        <div
          class="cont bg-w fx-h-c"
          contenteditable="true"
          placeholder="输入评论"
          v-html="h"
          ref="val"
          @focus="focus"
          @blur="blur"
        ></div>
        <!-- <div class="cont">
          <a-input :value="value" @input='handleInput' placeholder='输入评论'></a-input>
        </div> -->
        <div class="edit-img cs" v-if="imgUrl">
          <img :src="imgUrl" alt="" />
          <button class="cancel br-5" @click="cancelImg"></button>
        </div>
      </div>
    </div>
    <!-- <Btns v-if='true' :disabled='active'></Btns> -->
    <Btns v-if="true"></Btns>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Btns from "@/components/article-detail/comment/Btns";
export default {
  name: "CommentInput",
  data() {
    return {
      value: "",
      imgUrl: "",
      h: "",
      init: true,
      active: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  components: {
    Btns,
  },
  methods: {
    cancelImg() {
      this.imgUrl = "";
    },
    handleInput(e) {
      // this.value = e.target.value;
      // this.$bus.$emit('content', this.value);
    },
    focus() {
      this.active = true;
    },
    blur() {
      this.active = false;
    },
  },
  created() {
    this.$bus.$on("commentImg", (url) => {
      this.imgUrl = url;
    });

    // 清空操作
    this.$bus.$on("resetVal", () => {
      this.h = "";
      if (this.$refs.val) this.$refs.val.innerHTML = "";
      this.imgUrl = "";
    });

    this.$bus.$on("getContent", () => {
      console.log(this.h, "触发");
      this.$bus.$emit(
        "receiveContent",
        this.$refs.val && this.$refs.val.innerHTML
      );
    });
  },
  mounted() {
    this.$bus.$on("getEmoit", (path) => {
      this.h = this.$refs.val && this.$refs.val.innerHTML;
      // if (this.init) {
      // this.h = this.$refs.val && this.$refs.val.innerText;
      // this.init = false;
      // }
      this.h += `<img src="${path}" style="width: 2rem; height: 2rem; margin: 0.2rem" alt=""/>`;
    });
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 60rem;
  margin: 0 auto;
  padding: 2rem;
  background: #fafbfc;
  .c-input {
    margin-bottom: 1rem;
    .img {
      width: 3rem;
      height: 3rem;
      margin-right: 1rem;
    }
    .box {
      width: 52rem;
      padding: 0.5rem;
      border: 1px solid #eaeaea;
      .cont {
        line-height: 1.5;
        // height: 4rem;
        outline: none;
        // padding: 1rem;
        // white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        img {
          width: 2rem;
          height: 2rem;
        }
      }
      .edit-img {
        position: relative;
        img {
          width: 8rem;
          height: 8rem;
        }
        .cancel {
          position: absolute;
          left: 6.2rem;
          top: 0.3rem;
          border: 1px solid #eaeaea;
          width: 1.2rem;
          height: 1.2rem;
          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0.55rem;
            transform: rotateZ(45deg);
            width: 0.1rem;
            height: 1rem;
            background-color: #fff;
          }
          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0.55rem;
            transform: rotateZ(-45deg);
            width: 0.1rem;
            height: 1rem;
            background-color: #fff;
          }
        }
      }
    }
  }
}
</style>